<template>
  <div>
    <div class="btnbox">
      <el-button
        type="primary"
        class="w-[109px] rounded-[23px]"
        color="#3721FF"
        @click="handelTemplate"
      >
        <Icon icon="ep:plus" :size="12" color="#fff" />
        <span>新增</span>
      </el-button>
    </div>
    <div class="mt-[22px] tablebox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="createName" label="创建者" />
        <el-table-column label="创建时间 ">
          <template #default="{ row }">
            {{ formatDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="editItem(row)">编辑</el-button>
            <el-button link type="danger" size="small" @click="delItem(row)">删除</el-button>
            <el-button link type="primary" size="small" @click="setCopy(row)">复制</el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="setTop(row, 10)"
              v-if="row.sort === 0"
              >取消置顶</el-button
            >
            <el-button link type="primary" size="small" @click="setTop(row, 0)" v-else
              >置顶</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </div>
    <TemplateAction ref="templateActionRef" :curRow="curRow" @updateList="getList" />
  </div>
</template>
<script setup lang="ts">
import TemplateAction from './components/templateAction.vue'
import * as ExportApi from '@/api/mall/trade/export'
import { formatDate } from '@/utils/formatTime'
import { usePageLoading } from '@/hooks/web/usePageLoading'
const { loadStart, loadDone } = usePageLoading()

const message = useMessage()

const templateActionRef = ref<InstanceType<typeof TemplateAction> | null>(null)

const tableData = ref<ExportApi.ExportItemsVO[]>([])

const total = ref(0)

const curRow = ref<ExportApi.ExportItemsVO>({})

const queryParams = ref({
  pageNo: 1,
  pageSize: 10
})

const handelTemplate = () => {
  curRow.value = {}
  templateActionRef.value?.show()
}

/**
 * 复制
 */
const setCopy = async (row: ExportApi.ExportItemsVO) => {
  if (!row.id) {
    message.error('请选择要复制的模板')
    return
  }
  try {
    await message.confirm('确定复制该模板吗？')
    loadStart()
    await ExportApi.copyExport(row.id)
    message.success('复制成功')
  } finally {
    loadDone()
    getList()
  }
}

/**
 * 置顶
 */
const setTop = async (row: ExportApi.ExportItemsVO, type: 0 | 10) => {
  if (!row.id) {
    message.error('请选择模板')
    return
  }
  try {
    loadStart()
    await ExportApi.topExport({ id: row.id, type })
    message.success(`${type === 0 ? '置顶成功' : '取消置顶成功'}`)
  } finally {
    loadDone()
    getList()
  }
}

/**
 * 编辑
 */

const editItem = (row: ExportApi.ExportItemsVO) => {
  curRow.value = row
  if(row.defaultFlag ===1){
    message.error('该模板使用中，不能编辑')
    return
  }
  templateActionRef.value?.show()
}

/**
 * 删除
 */
const delItem = async (row: ExportApi.ExportItemsVO) => {
  if(row.defaultFlag ===1){
    message.error('该模板使用中，不能删除')
    return
  }
  try {
    await message.delConfirm('确定删除该模板吗？')
    loadStart()
    await ExportApi.deleteExport(row.id as number)
    message.success('删除成功')
  } finally {
    loadDone()
    getList()
  }
}

/**
 * 获取列表
 */
const getList = async () => {
  try {
    const data = await ExportApi.getExportPage(queryParams.value)
    tableData.value = data.list
    total.value = data.total
  } catch (e) {
    console.log(e)
  } finally {
  }
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
:deep(.el-button) {
  height: 45px !important;
  border-radius: 23px !important;
}
</style>
